<template>
    <transition name="fadeIn" mode="out-in">
        <div class="article">
            <article>
                <header>
                    <p>moduleA的count:{{count}}
                        <button v-on:click="add">+</button>
                    </p>
                     <p>moduleB的count:{{countb}}
                        <button v-on:click="addb">+</button>
                    </p>
                    <p>如果想回去列表页要过渡效果，只需要根据路由的transform来修改下过渡的name就可以</p>
                    <h1> {{atc.bbs_info.cate_name}}</h1>
                    <p>{{atc.author_info.nickname}}</p>
                </header>
                <section v-html="atc.bbs_info.content">
                </section>
            </article>
        </div>
    </transition>
</template>
<script>
import Vue from 'vue'
import AJAXURL from "../../ajaxurl.js"

export default {
    data() {
            return {
                atc: {
                    "author_info": {
                        "is_official": 0,
                        "sex": 1,
                        "user_id": 10
                    },
                    "bbs_focus": [{}],
                    "bbs_info": {
                        "cate_name": "",
                        "pub_time": "",
                        "total_comment": ''
                    },
                    "comment_list": [{
                        "is_top": 1,
                        "p_comment": {},
                        "user_info": {
                            "headimgurl": ""
                        }
                    }]
                }
            }
        },
        created: function() {
            Vue.http.get(AJAXURL.detail).then((response) => {
                this.atc = response.data.data

            })
        },
        methods: {
          //actions和mutations的name不能一样,state可以一样
           add(){
             return this.$store.dispatch('increment')
           },
           addb(){
             return this.$store.dispatch('increment2')
           }
        },
        computed: {
          //好麻烦呀
            count() {
                return this.$store.state.a.count
            },
            countb() {
                return this.$store.state.b.count
            }
        }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style style="less">
h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 10px;
}

.article {
    width: 100%;
    height: 100%;
    background: transparent;
    ;
    position: absolute;
}

.article section img {
    color: #42b983;
    display: block;
    width: 100%;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding: 8px 4em;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #03A9F4;
}

.header .link {
    position: absolute;
    top: 8px;
    color: #fff;
}

.header .right {
    right: 10px;
}

.header .left {
    left: 10px;
}


/*.page-enter-active{
  transition:transform 1s;
  transform: translateX(0);
}
.page-enter{
  transform: translateX(100%);
}
.page-leave-active{
  transform: transform 1s;
   transform: translateX(-100%);
}
.page-leave{
   transform: translateX(0);
} */


/*记得过渡只有两种情况 100% -100%  没有第三种情况*/

.fadeIn-enter-active,
.fadeIn-leve-active,
.fadeOut-enter-active,
.fadeOut-leave-active {
    transition: transform 1s;
}

.fadeIn-enter,
.fadeIn-leave-active {
    transform: translateX(100%);
}

.fadeOut-enter,
.fadeOut-leave-active {
    transform: translateX(-100%);
}
</style>
